<template>
	<div id="">
		<div class="header-title">
			{{title}}
		</div>
		<div class="text-left">
			<a-tabs default-active-key="1" @change="tabChange" >
				<a-tab-pane key="1" tab="充值记录" :forceRender="true">
					<recharge-record ref="recharge"></recharge-record>
				</a-tab-pane>
				<a-tab-pane key="2" tab="扣款记录" :forceRender="true">
					<deduction-record ref="deduction"></deduction-record>
				</a-tab-pane>
				<a-tab-pane key="3" tab="清空记录" :forceRender="true">
					<empty-record ref="empty"></empty-record>
				</a-tab-pane>
			</a-tabs>
		</div>
	</div>
</template>

<script>
	//充值记录
	import rechargeRecord from '@/components/billmange/rechargeRecord.vue';
	// 扣款记录
	import deductionRecord from '@/components/billmange/deductionRecord.vue';
	// 清空记录
	import emptyRecord from '@/components/billmange/emptyRecord.vue';
	export default {
		components: {
			rechargeRecord,
			deductionRecord,
			emptyRecord
		},
		data() {
			return {
				activeKey:'1',
				title:'充值记录',
			};
		},
		mounted(){
			this.$refs.recharge.getDayMonth();
		},
		methods: {
			tabChange(activeKey){
				if(activeKey=='1'){
					this.title="充值记录";
					this.$refs.recharge.getDayMonth();
				}else if(activeKey=='2'){
					this.title="扣款记录";
					this.$refs.deduction.getDayMonth();
				}else{
					this.title="清空记录";
					this.$refs.empty.getDayMonth();
				}
				// console.log(activeKey);
			},
		}
	};
</script>

<style scoped>
	.header-title {
		padding: 0 32px;
		height: 50px;
		line-height: 50px;
		font-size: 20px;
		text-align: left;
		font-weight: bold;
		background-color: #FFFFFF;
	}
	/* 深层选择器 */
	::v-deep .ant-tabs-nav-container {
	  background-color: #FFFFFF;
	  padding: 0 30px;
	}
	::v-deep .ant-tabs{
	}
	::v-deep .ant-calendar-range-picker-separator{
		color:#CCCCCC ;
	}
	>>> .ant-calendar-picker-input {
		white-space: nowrap;
	}
	::v-deep .ant-table-thead > tr > th{
		font-weight: bold !important;
	}
</style>
